<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>积分后台管理</title>
		<link rel="icon" href="img/lei_huiyuan_on.png"  size="16x16" />
	</head>
	<body>
<div id="top">

</div>
		<div class="body content"  id="app">
			<div id="left">

			</div>

			<div class="right">

				<div class="liebie_title style_hei_16">
					<img src="img/xiugai.png">轮播图管理
				</div>
				<div class="bottom">

					<div class="zijin_zhuru_top style_hei_14">
						<div class="zijin_zhuru_list shenfen_img">
							<p class="">&ensp;&ensp;<span class="style_hong_12">*</span>上传图片：</p>

							<div class="img_zheng">
								
								<img class="ossimg" :src="img" alt="" v-if="img">
								
							</div>

							<div class="shenfen_zhengmian up_erweima">
								<input type="file" name="" id="shenfen_zheng" multiple value="" @change="upload_zheng()" />
							</div>
						</div>
						<div class="zijin_zhuru_list zijin_zhuru_list_daili">
							<p>&ensp;&ensp;<span class="style_hong_12"></span>访问链接：</p> <input type="text" name=""
								value="" id="bannerurl" v-model="bannerurl" placeholder="请输入访问链接"
								class="add_xuan" />
						</div>
						<div class="zijin_zhuru_list zijin_zhuru_list_daili">
							<p>&ensp;&ensp;<span class="style_hong_12">*</span>图片排序：</p> <input type="text" name=""
								value="" v-model="sort" id="sort" placeholder="请输入图片排序" class="add_xuan" />
						</div>
						<div class="zijin_zhuru_list zijin_zhuru_list_daili">
							<p class="shezhi_tan"><span class="style_hong_12">*</span><span>是否显示：</span>
							<input type="radio" name="show1" id="" @click="is_show=1" value="1" :checked='is_show==1' />显示 &ensp;
								&ensp;<input type="radio" name="show2" @click="is_show=0" id="" value="0":checked='is_show==0'   />隐藏</p>
						</div>
						<div class="queren_tijiao " @click="tijiao()">
							确认提交
						</div>
					</div>


			<!-- 		<div class="tab_caozuo ">
						<div style="float:left;  margin-right:1rem;display: flex;align-items: center;"
							class="table_quanxuan">
							<input type="checkbox" name="quanxuan" id="quanxuan" style="width:14px; height:14px;"> 全选
						</div>
						<div class="filter-box">
							<div class="filter-text">
								<input class="filter-title" type="text" readonly placeholder="操作方式" />
								<i class="icon icon-filter-arrow"></i>
							</div>
							<select name="filter">
								<option value=""></option>
								<option value="del">删除</option>
							</select>
						</div>
						<input type="submit" name="Submit2" value="确定操作" class="queding style_bai_14">
					</div> -->

					<!--------列表开始-------->
					<table width="100%" align="center" class="tab_top baoguo " border="0" cellspacing="0"
						cellpadding="0">
						<tr style="background-color: #FAFAFA;">
							<!-- <td height="40" align="center" class="" width="50px">选择</td> -->
							<td align="center" class="" width="80px">序号</td>
							
							<td align="left" class="">图片</td>
							<td align="left" class="">访问链接</td>
							
							<td align="left" class="">显示方式</td>
							<td align="left" class="">创建时间</td>
							<td align="left" class="">图片排序</td>
							<td align="center" class="" width="150px">操作</td>
						</tr>
						
						<tr align="center" v-for="(item,index) in list" v-cloak>
							<!-- <td height="40" class=""><input type="checkbox" name="check" class="tab_xuanze"
									:value="item.id" ></td> -->
							<td align="center" class="">{{index+1}}</td>
							
							<td align="left" class="table_img"><img :src="item.image"></td>
							<td align="left" class="">{{item.link}}</td>
							<td align="left" class="">{{item.is_displayed==1?'显示':'隐藏'}}</td>
							
							<td align="left" class="">{{item.created_at}}</td>
							<td align="left" class="">{{item.sort_order}}</td>
							<td align="center" class=" style_lv_9 caozuo" >
								   <div class="dd_caozuo style_hong_14">
									   
								   	 <p  @click="bianji(item)">编辑</p>
									 <p  @click="del(item.id)">删除</p>
								   </div>
							</td>	
						</tr>
						


					</table>


					<!--------分页列表开始-------->
					<table border="0" align="center" cellpadding="0" cellspacing="0" class="p_pagelan">
						<tbody>
							<tr>
								<td class="">
									
								</td>
							</tr>
						</tbody>
					</table>


				</div>
			</div>
		</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/selectFilter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/get.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gong.js"></script>
<script src="js/fengzhuang.js"></script>
<script src="js/vue.js"></script>
<script>
	var app = new Vue({
	    el: '#app',
	    data:{
	        list :[],
			page:1,
			limit:10,
			pageCount:0,
			img:'',
			bannerurl:'',
			sort:'',
			is_show:'1',
			bannerId:''
	    },
		mounted(){
			this.get_list()
		},
		methods:{
			xuanye(page){
				this.page=page
				this.get_list()
			},
			bianji(item){
				this.img=item.image
				this.sort=item.sort_order
				this.is_show=item.is_displayed
				this.bannerurl=item.link
				this.bannerId=item.id
				 $("body,html").animate({
				                //html是最外层标签，可以代表整个页面；body 是它二级标签，可以用它代表页面的文档部分
				                // "body,html"都写上，兼容多浏览器
				                scrollTop: 0
				}, 500);//500是滚动到顶部所需要的时间0.5秒
		
			},
			get_list(){
			    $.ajaxDirect("/api/getBannerList",'get',{
			    	'page':this.page,
			    	'limit':this.limit
			    },
			     (obj)=> {
			    		  if(obj.code==200){
			    			  
			    			  this.list=obj.list
							  this.pageCount=Math.ceil(Number(obj.totalCount)/this.limit)
                              this.list=this.list.sort((a, b) => a.sort_order - b.sort_order);
			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			},
			upload_zheng() {
				 var that=this
				 var fileImgs=$("#shenfen_zheng")[0].files
				 
				   
				 for(var i=0; i<fileImgs.length; i++){
				 	    
						var formData = new FormData();
						formData.append("file", fileImgs[i]);
						$.ajax({
						        url: 'http://120.55.77.106:3000/api/upload',  
						        type: 'POST',  
						        data: formData,  
						        dataType: 'JSON',  
						        cache: false,  
						        processData: false,  
						        contentType: false,
						        success : function(data) {
						            if(data.code==200){
										that.img=data.fileUrl
									}
						        },
						        error:function(){
						            alert("上传失败");
						        }
						    });
				                             
				     }
			
			},
			tijiao() {
				if(this.bannerId){
					this.up_tijiao()
					return false
				}
				if (!this.img) {
				    layer.msg('请上传图片')
				    return false;
				}
				// if (!this.bannerurl) {
				//     layer.msg('请上传图片')
				//     return false;
				// }
				if (!this.sort) {
				    layer.msg('请输入排序')
				    return false;
				}
				var is_displayed=$("input[name='check']:checked").val()
				$.ajaxDirect("/api/createBanner",'post',{
					image:this.img,
					sort_order:this.sort,
					is_displayed:this.is_show+'',
					link:this.bannerurl
				},
				 (obj)=> {
					  if(obj.code==200){
                             layer.msg('添加成功')
                             setTimeout(()=>{
									 // if(this.bannerId){
										//  location.href='banner.html'
									 // }else{
										 history.go(0);
									 // }
                             								 
                             },500)
			 
					  }
				},
				(err)=> {
				        //发送失败
				})
				
			
			},
			up_tijiao() {
				$.ajaxDirect("/api/updateBanner",'post',{
					image:this.img,
					sort_order:this.sort,
					is_displayed:this.is_show+'',
					link:this.bannerurl,
					bannerId:this.bannerId
				},
				 (obj)=> {
					  if(obj.code==200){
			                 layer.msg('修改成功')
			                 setTimeout(()=>{
									 // if(this.bannerId){
										//  location.href='banner.html'
									 // }else{
										 history.go(0);
									 // }
			                 								 
			                 },500)
			 
					  }
				},
				(err)=> {
				        //发送失败
				})
				
			
			},
			del(id){
				$.ajaxDirect('/api/deleteBanner','get',{
					   bannerId:id
				},
				 (obj)=> {
						  if(obj.code==200){
							  
							 layer.msg('删除成功')
							 history.go(0);
				
						  }
				},
				(err)=> {
				        //发送失败
				})
			}
	
		}
	})	
</script>

		<script type="text/javascript">
			$('.filter-box').selectFilter({
				callBack: function(val) {
					//返回选择的值
					console.log(val + '-是返回的值')
				}
			});

			
	

			$('.queding').on("click", function () {
			    var str = [];
			    $("input[name='check']:checked").each(function (index, item) {
			        str.push($(this).val())
			    });
			    var menu = $('select[name="filter"]').val();
			    console.log(str, menu)
			    if(menu == 'del'){
			       $.ajaxDirect('/api/deleteBanner','get',{
			       	   bannerId:str.toString()
			       },
			        (obj)=> {
			       		  if(obj.code==200){
			       			  
			       			 layer.msg('删除成功')
			       			 setTimeout(()=>{
			       			 		history.go(0);						 
			       			 },500)
			       
			       		  }
			       },
			       (err)=> {
			               //发送失败
			       })
			    }else{
			        layer.open({content:'请选择正确操作'});
			    }
			});
		</script>

		<script type="text/javascript">
			$('#quanxuan').click(function() {
				var flag = $(this).is(":checked");
				console.log(flag)
				$(":checkbox[name='check']").prop("checked", flag);
			})
			$('.tab_xuanze').click(function() {
				var flag = true;
				var tbodyO = $('.tab_xuanze')

				for (var j = 0; j < tbodyO.length; j++) {
					//只要存在没被勾选的复选框
					if (!tbodyO[j].checked) {
						//判断标识为假，不影响全选框
						flag = false;
						break;
					}
				}
				$('#quanxuan').prop("checked", flag)
			})
		</script>
	</body>
</html>